<template>
  <div class="admin-dashboard">
    <!-- 侧边导航栏 -->
    <div class="sidebar">
      <div class="logo">
        <i class="icon-shield"></i>
        <span>管理员系统</span>
      </div>
      <nav class="menu">
        <router-link to="/admin/users" active-class="active">
          <i class="icon-users"></i>用户管理
        </router-link>
        <router-link to="/admin/blogs" active-class="active">
          <i class="icon-file-text"></i>博客管理
        </router-link>
        <router-link to="/admin/activities" active-class="active">
          <i class="icon-calendar"></i>活动管理
        </router-link>
        <router-link to="/admin/partitions" active-class="active">
          <i class="icon-layers"></i>分区管理
        </router-link>
        <router-link to="/admin/feedbacks" active-class="active">
          <i class="icon-message-square"></i>用户反馈
        </router-link>
      </nav>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <header class="top-bar">
        <div class="breadcrumb">
          <span v-for="(item, index) in breadcrumbs" :key="index">
            <span v-if="index > 0">/</span>
            {{ item }}
          </span>
        </div>
        <div class="user-info">
          <span>管理员</span>
          <i class="icon-user"></i>
        </div>
      </header>

      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminDashboard',
  data() {
    return {
      breadcrumbs: ['仪表盘']
    }
  },
  watch: {
    $route(to) {
      this.updateBreadcrumbs(to);
    }
  },
  created() {
    this.updateBreadcrumbs(this.$route);
  },
  methods: {
    updateBreadcrumbs(route) {
      const paths = route.path.split('/').filter(p => p);
      this.breadcrumbs = paths.map(p => {
        switch(p) {
          case 'admin': return '仪表盘';
          case 'users': return '用户管理';
          case 'blogs': return '博客管理';
          case 'activities': return '活动管理';
          case 'partitions': return '分区管理';
          case 'feedbacks': return '用户反馈';
          default: return p;
        }
      });
    }
  }
}
</script>
import { ElMessage } from 'element-plus'

<style scoped>
.admin-dashboard {
  display: flex;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.sidebar {
  width: 220px;
  background: linear-gradient(135deg, #1976d2, #2196f3);
  color: white;
  padding: 20px 0;
}

.logo {
  display: flex;
  align-items: center;
  padding: 0 20px 30px;
  font-size: 18px;
  font-weight: bold;
}

.logo i {
  margin-right: 10px;
  font-size: 24px;
}

.menu {
  display: flex;
  flex-direction: column;
}

.menu a {
  color: rgba(255, 255, 255, 0.8);
  padding: 12px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu a.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.menu i {
  margin-right: 10px;
  font-size: 16px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-bar {
  height: 60px;
  background-color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.breadcrumb {
  color: #607d8b;
}

.user-info {
  display: flex;
  align-items: center;
  color: #455a64;
}

.user-info i {
  margin-left: 10px;
  font-size: 18px;
}
</style>